<template>
  <div class="board-box-5">
    <div :class="`box-5-title`">
      {{title}}
    </div>
    <div class="box-5-main">
      <slot></slot>
    </div>
    
  </div>

</template>
<script lang="ts" setup>
import { defineProps } from 'vue';

defineProps<{
  title: string,
}>()
</script>

<style lang="less" scoped>
.board-box-5 {
  position: relative;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgb(0 255 255);
  background: linear-gradient(180deg, rgba(8, 22, 48, 1) 0%, rgba(8, 22, 48, 1) 0%, rgba(9, 37, 61, 1) 100%, rgba(9, 37, 61, 1) 100%);
  .box-5-title {
    border-right: 1px solid rgb(0 255 255);
    border-bottom: 1px solid rgb(0 255 255);
    border-bottom-right-radius: 4vh;
    padding: 0 20px 0 10px;
    text-align: center;
    color: #fff;
    font-size: 1.6vh;
    font-weight: 400;
    line-height: 4vh;
    height: 4vh;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(90deg,
          rgb(9 19 44) 0%,
          rgb(9 19 44) 39%,
          rgb(9 55 79) 100%,
          rgb(9 55 79) 100%);
  }
  .box-5-main{
    height: calc(100% - 4vh);
    margin-top: 4vh;
   
  }
  
}
</style>
